@import url(http://fonts.googleapis.com/css?family=PT+Sans|Philosopher&subset=cyrillic,latin);
@import 'main.css';
@import 'normalize.min.css';

@mixin philosopher-header($size){
    font-family: 'Philosopher', sans-serif;
    font-size: $size;
    padding:0;
    margin:0;
}

@mixin wrap($width){
    width: $width;
    margin: 0 auto;
}

@mixin gradient($color-top, $color-bottom){
    background: linear-gradient(to bottom, $color-top 0%, $color-bottom 100%);
    background: -moz-linear-gradient(top, $color-top 0%, $color-bottom 100%);
    background: -webkit-linear-gradient(top, $color-top 0%, $color-bottom 100%);
}

@mixin links($color){
    a{
        text-decoration: underline;
        color: $color;

        &:hover{
            text-decoration: none;
        }
    }
}

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

.all{ 
    @include wrap(1000px);
    font-family: 'PT Sans', sans-serif;
    position: relative;
    min-height: 100%;
}
.wrapper{ @include wrap(824px);}


// Header section
header{
    @include gradient(#00b2e7, #002732);
    color: #fff;
    padding: 0 30px;
    height: 140px;

    h1.logo{
        @include philosopher-header(46px);
    }
    h2.slogan{
        @include philosopher-header(18px);
        margin: -10px 0 0 40px;
    }
}

// Manin menu section
nav.main-menu{
    @include gradient(#002732, #000);
    padding: 0 30px;

    ul{
        padding:0;
        margin:0;
        list-style-type: none;
        width: 100%;

        li{
            display: inline-block;
            padding: 0 5px 5px 0;

            &:after{
                content: "|";
                color: #fff;
                padding-left: 10px;
            }
            &:last-child:after{
                content: "";
            }

            @include links(#fff);
        }
    }
}

// Content section
article.content{
    color: #333;
    padding-bottom: 80px;

    .location{
        margin-top: 10px;
        font-size: 13px;

        a{
            color: #007de7;
            text-decoration: none;

            span{
                border-bottom: 1px dashed #007de7
            }
        }
    }
    h1{
        font-size: 20px;
        font-weight: normal;
    }
    .day-description{
        font-size: 15px;
        margin-bottom: 10px;
    }
    section.text{
        p{
            font-size: 14px;
            width: 80%;
        }
    }
}

// Footer
footer{
    width: 100%;
    background: #000 url(../images/footer_moon.png) no-repeat 85% bottom;
    color: #fff;
    padding: 10px 0;
    height: 60px;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;

    .info{
        margin: 20px 0 0 80px;
    }

}
